<template>
  <div>
    <main>
      <!-- 桌边部分 -->

      <!-- 右边部分 -->
      <div class="right">
        <div
          class="shoppin"
          v-for="(value, index) in $store.state.meituan.arr"
          :key="index"
        >
          <div class="shoppin-right">
            <p class="title">{{ value.title }}</p>
            <p>月售{{ value.xiaoliang }} 好评{{ value.haoping }}</p>
            <p class="red">
              ￥{{ value.price }} <span>原价{{ value.pricez }}￥</span>
            </p>
            <p class="jishu">
              <span @click="jian(index)" class="jian" v-if="value.n > 0"
                >-</span
              >
              <span v-if="value.n > 0" class="num">{{ value.n }}</span>
              <span @click="jia(index)" class="jia">+</span>
            </p>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <p @click="xianshi1">盒子</p>
      <ul v-if="$store.getters.getsum != 0">
        <li
          class="shoppin"
          v-for="(value, index) in $store.state.meituan.arrNew"
          :key="index"
          v-if="xianshi == true"
        >
          <div class="shoppin-right">
            <p class="title">{{ value.title }}</p>
            <p>月售{{ value.xiaoliang }} 好评{{ value.haoping }}</p>
            <p class="red">
              ￥{{ value.price }} <span>原价{{ value.pricez }}￥</span>
            </p>
            <p class="jishu">
              <span @click="jian(index)" class="jian" v-if="value.n > 0"
                >-</span
              >
              <span v-if="value.n > 0" class="num">{{ value.n }}</span>
              <span @click="jia(index)" class="jia">+</span>
            </p>
          </div>
        </li>
      </ul>
      卷后￥{{ $store.getters.getsum }}
    </footer>
  </div>
</template>
<style scoped>
footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background: #fff !important;
}
.jishu {
  width: 2rem;
  overflow: hidden;
}
.jia {
  font-weight: 700;
  font-size: 0.4rem;
  float: right;
}
.jian {
  font-weight: 700;
  font-size: 0.4rem;
  float: left;
}
.num {
  font-weight: 700;
  font-size: 0.2rem;
  float: left;
  margin-top: 0.2rem;
  margin-left: 0.65rem;
}
.title {
  font-size: 0.3rem;
  font-weight: 700;
}
.red {
  color: red;
  font-size: 0.3rem;
  font-weight: 700;
}
.red span {
  color: #ccc;
  font-size: 0.16rem;
  font-weight: 400;
}
.right {
  width: 100%;
  overflow: hidden;
}
.shoppin {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0.2rem;
  margin-top: 0.4rem;
}
.shoppin img {
  width: 1.5rem;
  height: 1.5rem;
}
.shoppin-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.1rem;
  width: 3.5rem;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
  font-size: 0.16rem;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
}
header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1rem;
}
header ul li {
  width: 30%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}
.app,
html,
body {
  width: 100%;
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
}

/* 主要内容 */
main {
  flex: 1;
  overflow-y: auto;
  display: flex;
}

/* 主要内容左边 */
.left {
  width: 1.6rem;
  height: 100%;
  overflow-y: auto;
}

.left ul {
  width: 1.6rem;
}

.left ul .te {
  background: #fff;
}

.left ul li {
  width: 1.6rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f5f7;
}

.left ul li a {
  width: 0.96rem;
  font-size: 0.21rem;
  color: #333;
  padding-top: 0.04rem;
}

.left ul li a span {
  height: 0.24rem;
  display: inline-block;
  line-height: 0.24rem;
  color: #fff;
  background: #00b43c;
  text-align: center;
  width: 0.24rem;
  font-weight: 700;
  padding-top: 0.02rem;
}

.left ul li a span b {
  height: 0.4rem;
  font-weight: 400;
  padding-top: 0.04rem;
  line-height: 0.4rem;
  display: inline-block;
}

footer {
  width: 100%;
  overflow: hidden;
  background: #131d26;
  display: flex;
  align-items: center;
}
</style>
<script>
export default {
  data() {
    return {
      xianshi: false,
    };
  },
  methods: {
    jia(index) {
      this.$store.commit("jia", index);
    },
    jian(index) {
      this.$store.commit("jian", index);
    },
    xianshi1() {
      this.xianshi = !this.xianshi;
    },
  },
};
</script>